<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
	<title>reveal遥控器</title>
	<script type="text/javascript" src="js/wilddog.js"></script>
	<script type="text/javascript" src="js/wilddog-sync.js"></script>
	<link rel="stylesheet" href="css/semantic.css">
	<style type="text/css">
		#left, #right, #up, #down {
			width: 100px;
			position: absolute;
		}
		#left{
			left: 10%;
			top: 20%;
		}
		#right{
			right: 10%;
			top: 20%;
		}
		#up{
			left: 50%;
			top: 10%;
			margin-left: -50px;
		}
		#down{
			left: 50%;
			top: 30%;
			margin-left: -50px;
		}
		h2{
			text-align: center;
		}
	</style>
</head>
<body>
	<!-- <div class="ui button animated" id="left">
		<div class="visible content">left</div>
		<div class="hidden content"><i class="right arrow icon"></i></div>
	</div> -->
	<h2 class="ui header">revealPPT简易控制器</h2>
	<!-- <div class="ui animated button" id="#left">
		<div class="visible content">left</div>
		<div class="hidden content"><i class="left arrow icon"></i></div>
	</div>
	<div class="ui animated button" id="#right">
		<div class="visible content">right</div>
		<div class="hidden content"><i class="right arrow icon"></i></div>
	</div>
	<div class="ui vertical animated button" id="#up">
		<div class="visible content">up</div>
		<div class="hidden content"><i class="up arrow icon"></i></div>
	</div>
	<div class="ui vertical animated button" id="#down">
		<div class="visible content">down</div>
		<div class="hidden content"><i class="down arrow icon"></i></div>
	</div> -->
	<div>
		<button class="ui left labeled icon button secondary" id="left"><i class="left arrow circle icon"></i> left</button>
		<button class="ui left labeled icon button secondary" id="right"><i class="right arrow circle icon"></i> right</button>
		<button class="ui left labeled icon button secondary" id="up"><i class="up arrow circle icon"></i> up</button>
		<button class="ui left labeled icon button secondary" id="down"><i class="down arrow circle icon"></i> down</button>
	</div>
	<!-- <button id="clean">clean</button> -->
	<script type="text/javascript">
		window.onload = function() {
			// 配置野狗
			var config = {
				syncDomain: "yourWilddogID.wilddog.com",
				syncURL: "https://yourWilddogID.wilddogio.com"
			};
			wilddog.initializeApp(config);
			var ref = wilddog.sync().ref("reveal");
			// 1234 上右下左
			var $ = function(dom) {
				return document.getElementById(dom);
			}
			$('up').onclick = function(){
				changeData(1);
			}
			$('right').onclick = function(){
				changeData(2);
			}
			$('down').onclick = function(){
				changeData(3);
			}
			$('left').onclick = function(){
				changeData(4);
			}
			// $("#clean").on("click", function() {
			// 	ref.set(null);
			// });
			// 设置向野狗更新数据
			function changeData(status) {
				var time = String((new Date()).getTime()).slice(0,11);
				var data = {
					status: status,
					time: time
				};
				// ref.remove();
				ref.set(data);
			}
			// 转换数据成野狗能正常保存的数据
			// function transData(orgdata) {
			// 	return JSON.parse(JSON.stringify(orgdata));
			// }
		}
	</script>
</body>
</html>